<template>
	<view>
		<view class="goods-item">
			<!-- 商品左侧图片区域 -->
			<view class="goods-item-left mr10">
				<!-- 使用 v-if 指令控制 radio 组件的显示与隐藏 -->
				<!-- 存储在购物车中的商品，包含 goods_state 属性，表示商品的勾选状态 -->
				<!-- v-if="showRadio" -->
				<!-- :checked="goods.goods_state" -->
				<!-- :checked="goods.goods_state" -->
				<!-- 存储在购物车中的商品，包含 goods_state 属性，表示商品的勾选状态 -->
				<view class="" v-if="showRadio"  >
					<radio :checked="goods.goods_state" color="#7976e9" v-if="showRadio" @click="radioClickHandler"></radio>
				</view>
				<view class=""   v-else style="width: 29px;">
					
				</view>
				<image :src="goods.goods_small_logo " class="goods-pic"></image>
			</view>
			<!-- 商品右侧信息区域 -->
			<view class="goods-item-right">
				<!-- 商品标题 -->
				<view class="goods-name font_b  text-ellipsis" style="width:300rpx;">{{goods.goods_name}}
				</view>
				<view class="tag" style="text-align: center;line-height: 40rpx;">
					<view class="size_10 flex-cen" style="justify-content: space-around;">
						3盒 <u-icon name="arrow-down" color="#848484" size="4rpx"></u-icon>
					</view>
				</view>
				<view class="flex-start" >
					<!-- 价格 -->
					<view class="goods-info-box mr30" style="max-width: 200rpx;">
						<view class="">
							<view class="goods-price color_orange ms10">￥{{goods.goods_price}} </view>
							<view class="color_orange size_12">每件预计到手 ￥{{goods.goods_price}}</view>
						</view>
					</view>
					<!-- 商品数量 -->
					<u-number-box v-if="showNum" :min="1" v-model="goods.goods_count"
						@change="valChange"></u-number-box>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-goods",
		// 定义 props 属性，用来接收外界传递到当前组件的数据
		props: {
			// 商品的信息对象
			goods: {
				type: Object,
				defaul: {},
			},
			// 是否展示图片左侧的 radio
			showRadio: {
				type: Boolean,
				// 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
				default: false,
			},
			// 是否展示价格右侧的 NumberBox 组件
			showNum: {
				type: Boolean,
				default: false,
			},
			/*  */
		},
		data() {
			return {
				value: '',
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
			};
		},
		methods: {
			/* 数量增加 */
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.$emit('num-change', {
					// 商品的 Id
					goods_id: this.goods.goods_id,
					// 商品的最新数量
					goods_count: +e.value
				})
			},
			// radio 组件的点击事件处理函数
			radioClickHandler() {
				// 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件，
				// 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数
				this.$emit('radio-change', {
					// 商品的 Id
					goods_id: this.goods.goods_id,
					// 商品最新的勾选状态
					goods_state: !this.goods.goods_state
				})
			},
			// NumberBox 组件的 change 事件处理函数
			// numChangeHandler(val) {
			// 	// 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件
			// 	this.$emit('num-change', {
			// 		// 商品的 Id
			// 		goods_id: this.goods.goods_id,
			// 		// 商品的最新数量
			// 		goods_count: +val
			// 	})
			// },
		},
		filters: {
			// 把数字处理为带两位小数点的数字
			tofixed(num) {
				console.log(num, "num")
				return Number(num).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	.umberbox {
		// width: 126rpx;
		// height: 42rpx;
		background-color: #fff;
		// border-radius: 15rpx;
		border: 2rpx solid #D9D9D9;
	}

	.tag {
		width: 100rpx;
		height: 40rpx;
		background: #F5F5F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.goods-item {
		display: flex;
		padding: 20rpx 10rpx;
		border-bottom: 2rpx solid #f0f0f0; // 让 goods-item 项占满整个屏幕的宽度
		width: 750rpx;
		// 设置盒模型为 border-box
		box-sizing: border-box;

		.goods-item-left {
			// margin-right: 10rpx;
			margin-right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.goods-pic {
				width: 200rpx;
				height: 200rpx;
				display: block;
			}
		}

		.goods-item-right {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;

			.goods-name {
				font-size: 26rpx;
			}

			.goods-info-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.goods-price {
				font-size: 32rpx;
				color: #F8662D;
			}
		}
	}
</style>